as_snipercaptcha: Pure CSS/DHTML (no GD) CAPTCHA engine class

The main idea is simple : user doesn't enter generated digits into a text INPUT field, instead he (she) points and clicks color-marked cells in the CAPTCHA grid, and his browser sends results to the server through AJAX calls and receives commands for the next click, until all checking sequence is done. Testing results return into the client after the last click. So Your JavaScript code can do some nesessary job in case of passed (or failed) CAPTCHA test.

Here is an installation and using instruction for as_snipercaptcha class.

Installing as_snipercaptcha

1. Download distributive zip file and unzip it into temporary folder. If you will use CAPTCHA engine from more than one page, place as_snipercaptcha.php file into one of folders listed in your PHP.ini "include_path" variable. Otherwise, just place it in the folder with your main script.
   If You use jQuery framework in Your project, it's recommended to use jQuery-aware class version - as_snipercaptcha_j.php, so there is no need to include as_jsfunclib.js in that case. JQuery version of a class is more compact and might be more cross-browser compatible.
2. Move or copy image files (*.png,*.gif) from distributive to Your Image folder, or into the folder where Your PHP pages resides. (You'll need to set relative path to this folder in the defined IMGPATH constant if it's not a current dir)
   define('IMGPATH','allimages/');
   File captchasight.png is a "marker" that CSniperCaptcha uses to point a cell. cap_progress.png is used to show a progress bar of a testing process.
   
3. Make sure that as_jsfunclib.js file located in the current directory, or place it into Your "javascript" repository folder (in that case You'll need to pass it in DrawRefs() method).
   This javascript function set is used to make XmlHttpRequest object.

Using CSniperCaptcha class

CSniperCaptcha generates small HTML table (let's call it "grid") that may contain variable number of rows and columns. These dimensions can be set by You, or randomly generated by the class (if not passed). Grid cell size is also variable, that can be passed or random-generated. Random generation is recommended if You want more protect from CAPTCHA cracking algorhytms. How this works :

1. When CAPTCHA grid is ready and rendered in the browser, AJAX request sends it's absolute position (x and y coords) to the server.
2. Then server starts a checking sequence: it randomly chooses cell number, computes it's absolute coordinates (based on base position and dimensions of a grid), and sends them to the client in AJAX response.
3. Client receives these coordinates and moves special image marker to the specified position.
4. Site visitor must point marked cell with a mouse and click on it. OnClick function sends the selected grid cell "id" to the server.
5. When all NN clicks done, server script checks matching of strings and sends 'yes' or 'no' to the client. Besides, it stores checking result in $_SESSION variable.

Here is a simple example. (CAPTCHA grid will be drawn with random dimensions and cell height/width)

require_once('as_snipercaptcha.php');

$captcha = new CSniperCaptcha();

CSniperCaptcha::DrawRefs(); // draw links to the CSS and js files used by the class
// draw the main HTML code, beginning FORM tag and
// all form fields You need (TEXTAREA etc.) without 'submit' button

$captcha->Draw();

//... Now You can draw a submit button and </FORM> ending tag

$captcha->DrawJsCode();

// the rest of Your HTML code here ...

CSniperCaptcha methods

• $codelen is a number of "user clicks" (code word length)
• $submitid is a "submit" button id. If this id passed to the constructor, this button becomes enabled after the last user grid-click, when server returns to client "OK" flag. So, if You pass this id, Your HTML code should draw this button initially disabled.
• $jscode_success - Javascript code (usually function name with "()" ) that must be fired after successful finished CAPTCHA checking, before posting form data.
• $jscode_fail - Javascript code (usually function name with "()" ) that must be fired after failed CAPTCHA checking, before posting form data.
• $reinit - 1 (integer value) or Javascript code. Passed any non-empty parameter means that You want "re-init" image and prompt be echoed. This "button" will fire re-initialization function, after wich user can start again the captcha process. Any non-empty parameter value turns ON this feature. If You pass a string, CSniperCaptcha will treat it as javascript code that must be fired when re-init link is pressed.
  Re-init image is "captcha_init.gif", it's included in distributive. You can change it to meet Your site color scheme. "Re-init" prompt text displayed after the image may be set in the global associative array, $sitestrings['captcha_init'].

• $uri - filename of a backend script, that will receive client AJAX calls and send responses during CAPTCHA checking process.

require_once('as_snipercaptcha.php');

$captcha = new CSniperCaptcha(5, 'btn_submit'); // here SESSION is started, so NO HTML output before this !

// As the same script receives the POSTed form data, We have to check if test passed, and publish data to the SQL...
if(!empty($_POST)) {
  if($captcha->CheckPassed()){
     // process user data (publish to the database etc.
     PublishNewMessage(); // Your function that does a job
     echo "Thanks, Your message published !";
  }
  else {
     echo "You are a bot, go away";
  }
  exit;
}

// print the main HTML code, beginning FORM tag and
// all form fields You need (TEXTAREA etc.) without 'submit' button
echo "submit new message";
$self = $_SERVER['PHP_SELF'];

DrawRefs(); // draw links to the CSS and js files used by the class


echo "<FORM action='$self' method='POST' name='myform'>";
echo "<TEXTAREA name='messagetext' style='width:100%; height:120px'></TEXTAREA><br />";

$captcha->Draw();

echo "<input type='SUBMIT' id='btn_submit' name='btn_submit' value='Submit message' DISABLED />
echo "</FORM>";
$captcha->DrawJsCode();
//... print the rest of HTML code, including ending </BODY>, </HTML> tags

// backend for processing posted data
require_once('as_snipercaptcha.php');
$captcha = new CSniperCaptcha();
if($captcha->CheckPassed()) {
   PublushFormData($_POST); // processing posted data function...
   echo "thanks, your message added"; // ajax response will go to the client
}
else echo "Error, CAPTCHA test not passed";